<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<script src="js/jquery2.js"></script> 
		<script src="js/vue.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/base64.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<style>
		body{
			background: url(img/background.jpg) no-repeat top center;
			background-color:#c0e4da;
		}
		#app{
			/*height:800px;*/
		}
	</style>
	<body>
		<div class="container" id="app" >
			<!-- 头像和个人信息展示区域 -->
			<div class="row" style="color: #fff;overflow: hidden;padding:10px;">
				<div class="col-md-2 text-center">
					<img v-bind:src="UserInfo.UserHead" class="img-circle" height="80px" />
				</div>
				<div class="col-md-10">
					<h3>{{UserInfo.Name}}</h3>
					<p v-if="UserInfo.Simple==undefined || UserInfo.Simple==''">
						这个人很懒，啥也没写...
					</p>
					<p v-else>
						{{UserInfo.Simple}}
					</p>
				</div>
			</div>
			<!-- 内容区域 -->
			<div class="row"  style="background: #fff; overflow: hidden;padding: 10px;min-height: 800px;">
				<div class="col-md-9">
					<p>
						<label class="label label-primary">1</label>
						<span>当前用户信息</span>
					</p>
					<div class="form-horizontal">
						<div class="form-group">
							<label class="control-label col-md-2">用户编号</label>
							<div class="col-md-10">
								<p class="form-control-static">{{UserInfo.Id}}</p>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">登录名</label>
							<div class="col-md-10">
								<input class="form-control" type="text" value="admin" v-model="UserInfo.LoginName" disabled />
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">用户昵称</label>
							<div class="col-md-10">
								<input class="form-control" type="text" v-model="UserInfo.Name" />
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">出生日期</label>
							<div class="col-md-10">
								<input class="form-control" type="date" v-model="UserInfo.BornDate" />
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">性别</label>
							<div class="col-md-10">
								<select class="form-control" v-model="UserInfo.Sex">
									<option value="">点我选择</option>
									<option value="男">男</option>
									<option value="女">女</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">个人简介</label>
							<div class="col-md-10">
								<input class="form-control" type="text" v-model="UserInfo.Simple" placeholder="用户懒,不写" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-2"></div>
							<div class="col-md-10">
								<button class="btn btn-success" @click="UpdateUser" data-toggle="modal" data-target="#updatemodal">
									<span class="glyphicon glyphicon-upload"></span>
									更新个人信息
								</button>
								<button class="btn btn-primary" data-toggle="modal" data-target="#userheah">
									<span class="glyphicon glyphicon-picture"></span>
									设置头像
								</button>
								<span class="help-block">更新之后无法回滚到以前的信息，请谨慎更改。</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 修改信息弹出层 -->
				<div class="modal fade" id="updatemodal">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-body">
								<h4 class="text-center">信息修改{{UpdateModal.Text}}，点击任意处关闭</h4>
							</div>
						</div>
					</div>
				</div>
				<!-- 修改头像弹出层 -->
				<div class="modal fade" id="userheah">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h3>设置头像</h3>
							</div>
							<div class="modal-body">
								<div class="form-group">
									<label>已选择头像:</label>
									
									<img v-bind:src="UserInfo.UserHeadBase64" class="img-rounded"  width="64px" v-if="UserInfo.UserHeadBase64!='' " />
									<img src="img/defaulthead.png" class="img-rounded"  width="64px" v-else />
								</div>
								<input class="btn btn-default" type="file" @change="ReadImage($event)"  accept="image/jpg,image/jpeg,image/png" />
								<span class="help-block">点击上方加载图片，建议上传的图像尺寸为64px*64px,文件小于2M</span>
							</div>
							<div class="modal-footer">
								<button class="btn btn-success" @click="UpdateUserHead" >将图片应用到头像</button>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<!-- 我的操作 -->
					<p>
						<label class="label label-primary">2</label>
						操作管理
					</p>
					<div class="form-group">
						<a href="./index" class="btn btn-block btn-primary">
							<span class="glyphicon glyphicon-edit"></span>
							发推文
						</a>
						<a href="./index" class="btn btn-block btn-primary">
							<span class="glyphicon glyphicon-eye-open"></span>
							查看已发推文
						</a>
					</div>
					<!-- 最近推文 -->
					<p>
						<label class="label label-primary">3</label>
						最新推文
					</p>
					<div class="media">
						<div class="media-left">
							<img v-bind:src="Tweet.user_head" class="media-object" height="64" />
						</div>
						<div class="media-body">
							<h4 class="media-heading">{{Tweet.user_name}}</h4>
							<p>{{Tweet.text}}</p>
							
						</div>
						<div class="right media-bottom btn-group-xs" style="text-align: right;">
							<button class="btn btn-default">
								<span class="glyphicon glyphicon-thumbs-up"></span>
								{{Tweet.up}}
							</button>
							
							<button class="btn btn-default">
								<span class="glyphicon glyphicon-thumbs-down"></span>
								{{Tweet.down}}
							</button>
						</div>
					</div>
					<!-- 通知 -->
					<p>
						<label class="label label-primary">4</label>
						通知公告
					</p>
					<div class="alert alert-info" role="alert">
						<span class="alert-link">管理员:</span>
						<span>目前网站处于开发建设阶段，请保持良好的发文习惯，文明上网，感谢配合。</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 注意事项 -->
		<div style="background: #222222; color: #fff;overflow: hidden;">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div style="padding-top: 20px;">
							<dl class="dl-horizontal">
								<dt>网页制作与网站制作信息</dt>
								<dd>网站由以下三位小组成员制作而成，用于 Java Web 结课设计。前端采用 Vue.js、JQuery.js、Bootstrap CSS 等框架制作，后台采用MVC设计，前后端采用 Ajax 进行数据传输，数据库采用 MySQL5.7，运行建议使用 Chrome 版本 73.0.3683.86（正式版本）、Edge 42.17134.1.0 及更新版本进行浏览，不建议采用 Internet Explorer 11.0 版本以下浏览器访问，前端页面均为自适应页面，可使用手机、PC浏览器进行浏览。</dd>
								<dt>小组成员</dt>
								<dd>刘海龙、王泽临、柴广瑞</dd>
								<dt>建议浏览器</dt>
								<dd>Chrome 版本 73.0.3683.86（正式版本）<br>Edge 42.17134.1.0</dd>
								<dt>版权信息</dt>
								<dd>程序源码已在 Gitee 开源，未经开发小组成员授权不得进行商业运作，仅允许学习研究使用。</dd>
								<dt>作者邮箱</dt>
								<dd>liuhailong113@vip.qq.com</dd>
							</dl>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				UserInfo:{
					Id:0,
					LoginName:'',
					Name:'',
					BornDate:'',
					Sex:'',
					Simple:'',
					CreateDate:'',
					UserHead:'',
					UserHeadBase64:'',
					UserHeadBase64Plus:'',
				},
				UpdateModal:{
					Text:'',
				},
				Tweet:[]
			},
			methods:{
				UpdateUser:function(){
					var Point=this;
					$.post("./userupdate",{
						user_name:this.UserInfo.Name,
						borndate:this.UserInfo.BornDate,
						sex:this.UserInfo.Sex,
						simple:this.UserInfo.Simple,
					},function(response){
						if (response=="success"){
							Point.UpdateModal.Text="成功";
						}else{
							Point.UpdateModal.Text="失败";
						}
					})
				},
				ReadImage:function(e){
					//图片转码
					var Point=this;
					var image=e.target.files[0];
					if (image.size>2101440){
						alert("图片过大请重新上传");
						
						return false;
					}
					var reader=new FileReader();
					reader.readAsDataURL(image);
					reader.onload=function(e){
						Point.UserInfo.UserHeadBase64=e.target.result;
						app.UserInfo.UserHeadBase64Plus=app.UserInfo.UserHeadBase64.substring(app.UserInfo.UserHeadBase64.indexOf(",")+1);
						//console.log(Point.UserInfo.UserHeadBase64);
					}
				},
				UpdateUserHead:function(){
					var Point=this;
					if (this.UserInfo.UserHeadBase64==""){
						alert("请选择图片");
						return false;
					}
					$.post("./userupdatehead",{
						imagebase64:this.UserInfo.UserHeadBase64Plus,
					},function(response){
						if (response=='success'){
							alert("头像应用成功,重新登陆后可见");
							$("#userheah").modal("hide");
						}else{
							alert("头像应用失败,请重试");
						}
					});
				}
			},
			created:function(){
				var Point=this;
				$.post("./userinfo",function(response){
					if (response!='error'){
						response=JSON.parse(response);
						Point.UserInfo.Id=response.id;
						Point.UserInfo.LoginName=response.login_name;
						Point.UserInfo.Name=response.user_name;
						Point.UserInfo.BornDate=response.borndate;
						Point.UserInfo.Sex=response.sex;
						Point.UserInfo.Simple=response.simple;
						Point.UserInfo.CreateDate=response.create_date;
						Point.UserInfo.UserHead=response.user_head;
					}
				});
				$.post("./queryalltweet",{
					type:'new'
				},function(response){
					response=JSON.parse(response);
					app.Tweet=response.tweet[0];
				});
			},
			
		});
	</script>
</html>
